<!--
 * @Description: 历史记录
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:30:11
 * @LastEditTime: 2021-09-29 18:10:14
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="page-content">
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form :model="filterSearch" label-width="80px">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 类型 -->
              <el-form-item label="日志类型">
                <!-- 请选择类型 -->
                <el-select v-model="filterSearch.logType" style="width:100%;" v-adaption>
                  <!-- URL请求 API请求 异常请求 -->
                  <el-option label="URL请求" value="path"></el-option>
                  <el-option label="API请求" value="normal"></el-option>
                  <el-option label="异常请求" value="error"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="6">
              <!-- 时间 -->
              <el-form-item label="时间范围">
                <!-- 至  开始时间 结束时间-->
                <el-date-picker
                  style="width:100%;"
                  v-model="filterSearch.time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
              <!-- 搜索 重置-->
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </table-bar>
    <tao-table
      :data="dataList"
      :page="page"
      @changePage="changePage"
      :showPage="true"
      ref="table"
      style="overflow: hidden;"
    >
      <!-- 详情 -->
      <el-table-column label="详情" align="center" width="80" type="expand">
        <template slot-scope="scope">
          <info :row="scope.row" />
        </template>
      </el-table-column>
      <el-table-column label="ID" align="center" width="100" prop="id" v-if="columns[0].show" />
      <!-- 日志类型 -->
      <el-table-column
        label="日志类型"
        align="center"
        width="150"
        sortable
        prop="logoType"
        v-if="columns[1].show"
      >
        <template slot-scope="scope">
          <!-- URL请求 API请求 异常请求 -->
          <span v-if="scope.row.logType === 'path'">
            <i class="el-icon-monitor" style="color: #409EFF;"></i>
            URL请求
          </span>
          <span v-if="scope.row.logType === 'normal'">
            <i class="el-icon-paperclip" style="color: #67C23A;"></i>
            API请求
          </span>
          <span v-if="scope.row.logType === 'error'">
            <i class="el-icon-warning-outline" style="color: #E6A23C;"></i>
            异常请求
          </span>
        </template>
      </el-table-column>
      <el-table-column label="IP" align="center" width="150" prop="logId" v-if="columns[2].show" />
      <el-table-column
        label="终端"
        align="center"
        width="100"
        sortable
        prop="isTrusted"
        v-if="columns[3].show"
      >
        <template slot-scope="scope">{{scope.row.isTrusted === 'Desktop' ? 'PC端' : '移动端'}}</template>
      </el-table-column>
      <el-table-column
        label="URL"
        min-width="250"
        show-overflow-tooltip
        prop="path"
        v-if="columns[4].show"
      />
      <el-table-column label="页面" align="center" width="150" prop="msg" v-if="columns[5].show" />
      <el-table-column
        label="错误类型"
        align="center"
        width="150"
        prop="errorType"
        sortable
        v-if="columns[6].show"
      >
        <template
          slot-scope="scope"
        >{{scope.row.logType === 'error' ? scope.row.errorType : '-' | filterType}}</template>
      </el-table-column>
      <el-table-column
        label="错误级别"
        align="center"
        width="150"
        prop="level"
        sortable
        v-if="columns[7].show"
      >
        <template
          slot-scope="scope"
        >{{scope.row.logType === 'error' ? scope.row.level : '-' | filterLevel}}</template>
      </el-table-column>
      <el-table-column
        label="日期时间"
        align="center"
        width="170"
        prop="timeLocalString"
        sortable
        v-if="columns[8].show"
      />
    </tao-table>
  </div>
</template>

<script>
import info from './info';

export default {
  components: {
    info
  },
  data () {
    return {
      dataList: [],
      filterSearch: {
        logType: null,
        time: []
      },
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      columns: [
        { name: 'ID', show: true },
        { name: '日志类型', show: true },
        { name: 'IP', show: true },
        { name: '终端', show: true },
        { name: 'URL', show: true },
        { name: '页面', show: true },
        { name: '错误类型', show: true },
        { name: '错误级别', show: true },
        { name: '日期时间', show: true }
      ]
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.refresh();
    });
  },
  filters: {
    // 过滤类型
    filterType (val) {
      switch (val) {
        case 'xhr':
          val = 'API接口请求错误';
          break;
        case 'resources':
          val = '资源加载错误';
          break;
        case 'javascript':
          val = 'JS脚本错误';
          break;
        case 'vue':
          val = 'VUE组件错误';
          break;
        default:
          val = '-';
      }
      return val;
    },
    // 过滤等级
    filterLevel (val) {
      switch (val) {
        case 'info':
          val = '普通';
          break;
        case 'warn':
          val = '一般';
          break;
        case 'error':
          val = '严重';
          break;
        default:
          val = '-';
      }
      return val;
    }
  },
  methods: {
    // 搜索
    search () {
      let _this = this;
      _this.page.page = 1;
      _this.refresh();
    },
    // 重置
    reset () {
      let _this = this;
      _this.page.page = 1;
      _this.filterSearch = {
        logType: null,
        time: []
      };
      _this.refresh();
    },
    // 刷新
    refresh () {
      let _this = this;
      let params = {
        uuid: JSON.parse(localStorage.getItem('sys')).user.info.id,
        logType: _this.filterSearch.logType,
        time: _this.filterSearch.time,
        limit: _this.page.pageSize,
        offset: (_this.page.page - 1) * _this.page.pageSize
      };
      _this.$http.post({
        url: '/api/sdwan/weblog/query',
        data: params
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          let { count, objects } = resultBody;
          _this.page.total = count;
          _this.dataList = objects;
        }
      });
    },
    // 过滤显示字段
    changeColumn (columns) {
      this.columns = columns;
      this.$refs.table.doLayout();
    },
    // 切换页码 & 显示条数
    changePage (page) {
      if (page.page) {
        this.page.page = page.page;
      } else {
        this.page.page = 1;
        this.page.pageSize = page.limit;
      }
      this.refresh();
    },
  }
};
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
.i-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e8eaec;
  position: relative;
  top: 1px;
}
.i-success {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #19be6b;
  position: relative;
  top: 1px;
}
.i-error {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ed4014;
  position: relative;
  top: 1px;
}
.i-warning {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f90;
  position: relative;
  top: 1px;
}
</style>